<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>08-父子组件间的数据传递</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="root">
		<counter :count="firstValue" @change="add"></counter>
		<counter :count="secondValue" @change="add"></counter>
		<div>{{total}}</div>
	</div>
</body>
<script>
	var counter={
		props:['count'],
		data:function(){
			return {
				number:this.count
			}
		},
		template:"<div @click='click'>{{number}}</div>",
		methods:{
			click:function(){
				this.number++;
				this.$emit('change',1)
			}
		}
	}
	var vm=new Vue({
		el:'#root',
		computed:{
			total:{
				get:function(){
					return total=this.firstValue+this.secondValue
				},
				set:function(value){

				}
			}
		},
		data:{
			firstValue:0,
			secondValue:1,
		},
		components:{
			counter:counter
		},
		methods:{
			add:function(step){
				console.log(this.total)
				this.total=this.total+step;
			}
		}
	})
</script>
</html>